<template>
	<view class="content container">
		<u-form :model="form" ref="uForm" :rules="rules" :errorType="['message']" :border-bottom="false">
			<view class="common-msg-show">
				<!-- 一 -->
				<view class="information-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>擅长领域</text>
				</view>
				<view class="common-msg-row">
					<u-form-item prop="domain">
						<u-input v-model="form.domain" type="textarea" placeholder="请填写擅长领域" :auto-height="false" maxlength="800" :clearable="false" />
						<view class="numerical">
							{{form.domain.length}}/800
						</view>
					</u-form-item>
				</view>
				<!-- 二 -->
				<view class="information-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>个人简介</text>
				</view>
				<view class="common-msg-row">
					<u-form-item prop="introduction">
						<u-input v-model="form.introduction" type="textarea" placeholder="请填写简介" :auto-height="false" maxlength="800" :clearable="false" />
						<view class="numerical">
							{{form.introduction.length}}/800
						</view>
					</u-form-item>
				</view>
				<!-- 三 -->
				<view class="information-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>胸牌/执业证/资格证/职称证，至少上传一项</text>
				</view>
				<view class="common-msg-row no-bgcolor">
					<view class="add-img-row">
						<view class="add-input" @tap="chooseImg" v-show="fileList.length < 3">
							<image src="@/static/img/common/add.png" mode="" class="img"></image>
						</view>
						<view class="add-img-detail" v-for="(item,index) in fileList" :key="index"
							:style="(index + 1 - 2)%3 == 0 ? 'margin: 12rpx 30rpx' : ''">
							<image :src="item"  mode="aspectFill"  class="add"></image>
							<image src="@/static/img/courseBuy/del.png" mode="aspectFill" class="del" @tap="delImg(index)"></image>
						</view>
					</view>
				</view>
			</view>
		</u-form>
		<u-button @click="submit" :custom-style="buttonStyle" shape="circle" hover-class="none">提交</u-button>
	</view>
</template>

<script>
import {API} from '@/config/myApi.js';
import storage from "@/utils/storage.js";
import { lk_common } from '@/config/myConfig.js';
export default {
	data() {
		return {
			form: {
				domain: '',
				introduction: "",
			},
			safeForm:{
				name: '',
				idCard: '',
			},
			rules: {
				domain: [{
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					},
					{
						min: 5,
						message: '擅长领域不能少于5个字符',
						trigger: ['blur', 'change']
					}
				],
				introduction: [{
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					},
					{
						min: 5,
						message: '简介不能少于5个字符',
						trigger: ['blur', 'change'],
					},
				],
			},
			// 上传图片
			action:"http://140.210.201.158:8890/common/common/upload/file",// 地址
			fileList: [], //上传图片的数组
			// button
			buttonStyle: {
				width: "100%",
				color: "#fff",
				fontSize: "32rpx",
				backgroundColor: "#F4333C",
			},
		};
	},
	onLoad() {
		this.safeForm = uni.getStorageSync('successVerifyCInfo');
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		// 选择
		chooseImg(){
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
				success: (res) => {
					// console.log(res);
					const tempFilePaths = res.tempFilePaths;
					
					uni.uploadFile({
						url: `${lk_common}/common/common/upload/file`, //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
						   "accessToken": storage.getAccessToken(),
						},
						success: (uploadFileRes) => {
							let face = JSON.parse(uploadFileRes.data)
							// console.log('上传完成后数据',face);
							this.fileList.push(face.result)
							// console.log(this.fileList);
						},
						
					});
				}
			});
		},
		//删除图片
		delImg(index) {
			this.fileList.splice(index, 1);
			// console.log(this.fileList);
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if(this.fileList.length === 0){
						uni.showToast({
							title:'图片不能为空',
							icon:'none'
						})
					}else{
						let pram = {
							...this.form,
							credentials:this.fileList.join(','),
							realName:this.safeForm.name,
							idCard:this.safeForm.idCard
						}
						console.log(pram);
						API.realAuthentication(pram).then(res =>{
							// console.log(res);
							if(res.code === 200) {
								uni.redirectTo({
									url:"/pages/common/submitSuccess"
								})
							}else{
								uni.showToast({
									title:res.message,
									icon:"none"
								})
							}
						})
					}
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;

		.u-form {
			flex: 1;
			overflow: hidden;
			overflow-y: scroll;
		}
	}

	// 表单
	.u-form-item {
		width: 100%;

	}

	.common-msg-show {
		padding-top: 30rpx;

		.information-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			>.img {
				width: 5rpx;
				height: 28rpx;
			}

			>text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 10rpx;
			}
		}

		.common-msg-row {
			position: relative;
			padding: 0rpx 24rpx;
			margin-bottom: 50rpx;
			width: 100%;
			min-height: 300rpx;
			background: #fff;
			border-radius: 14rpx;
			
			// 计算数字
			.numerical {
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 40rpx;
			}

			/deep/.u-form-item__message {
				position: absolute;
				bottom: -12px;
				left: -38px;
			}

			/deep/.u-list-item {
				margin: 4rpx;
			}
			
			
		}
		.no-bgcolor{
			background-color: transparent;
		}
	}
	// 图片
	.add-img-row {
		width: inherit;
		display: flex;
		flex-wrap: wrap;
		$w:180rpx;
		// 上传模拟
		.add-input{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12rpx;
			margin-right: 30rpx;
			width: $w;
			height: $w;
			background: #FFFFFF;
			border-radius: 10rpx;
			>.img{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.add-img-detail {
			width: $w;
			height: $w;
			border-radius: 12rpx;
			position: relative;
			margin-top: 12rpx;
			.add {
				width: $w;
				height: $w;
			}
	
			.del {
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				right: -14rpx;
				top: -14rpx;
			}
		}
	
		// .add-img-detail:nth-of-type(2) {
		// 	margin-left: 30rpx;
		// 	margin-right: 30rpx;
		// }
	}
</style>
